<template>
  <div class="company-analyze-wrapper">
    <title-bar
    :bar-title="barTitle"
    :more="true"
    barStyleName='light-red'
    :link="link"></title-bar>
    <text-grid v-for="(value, index) in list">
      <template slot="title">{{ value.name }}</template>
      <grid-item speratorClass="sperator-style"><label slot="label">目标</label><span slot="value">{{ value.target_sum | moneyFormate}}元</span></grid-item>
      <grid-item speratorClass="sperator-style"><label slot="label">成交</label><span slot="value">{{ value.cheng_jiao_sum | moneyFormate}}元</span></grid-item>
      <grid-item speratorClass="sperator-style"><label slot="label">预测</label><span slot="value">{{ value.proportion_sum | moneyFormate}}元</span></grid-item>
      <grid-item speratorClass="sperator-style"><label slot="label">完成</label><span slot="value">{{ value.proportion || 0}}%</span></grid-item>
    </text-grid>
    <div class="analyze-tip">成交金额最高的前三个团队</div>
  </div>
</template>
<script>
import TitleBar from './title-bar'
import TextGrid from './TextGrid/grid'
import GridItem from './TextGrid/grid-item'

export default {
  props: {
    barTitle: {
      type: String,
      default: '公司团队'
    },
    list: {
      type: Array,
      default: function () {
        return []
      }
    },
    time: {
      type: Number
    }
  },
  data () {
    return {
      data: [],
      link: {}
    }
  },
  watch: {
    time () {
      this.initLink()
    }
  },
  beforeMount () {
    this.initLink()
  },
  methods: {
    initLink () {
      this.link = {
        name: 'team-ranking',
        query: {
          time: this.time
        }
      }
    }
  },
  components: {
    TitleBar,
    TextGrid,
    GridItem
  }
}
</script>
<style lang="less">
.company-analyze-wrapper {
  background-color: white;

  .sperator-style {
    color: #e45454;
  }

  .analyze-tip {
    color: #999999;
    font-size: 16px;
    font-weight: 400;
    padding-left: 20px;
    padding-bottom: 10px;
    margin-top: 15px;
  }

  .text-grid {
    border-bottom: 1px solid #f2f2f2;
  }
}
</style>
